<template>
  <view class="common-card ">
    <view class="f_row_center item-post-text">
      <view @click="toDataPost(item)" class="f_column_center flex_1" v-for="(item,ind) in list" :key="ind">
        <view class="f_row_center">
          <image :src="item.img" style="height: 100rpx;width: 100rpx;margin-right: 20rpx"/>
          <view class="f_column">
            {{ item.title }}
            <span :style="{'color':item.color}" style="font-size:24rpx">
            <span style="font-size: 32rpx">
                {{ item.num }}
            </span>
            家</span>
          </view>
        </view>
      </view>

    </view>

  </view>
</template>

<script lang="ts">
import {Vue, Component, Prop} from "vue-property-decorator";
import XRouterConfig from "@/api/XRouterConfig";

@Component({
  components: {}
})
export default class DataPostStateView extends Vue {
  @Prop() info?: any;

  get list() {
    return [
      {img: '/static/wsb.png', title: '未上报', num: this.info.noSent, color: '#EC6A62',id:0},
      {img: '/static/ysb.png', title: '已上报', num: this.info.yesSent, color: '#3E7FF7',id:1},
    ];
  }

  toDataPost(item:any) {
    XRouterConfig.goTo('data_post',{type:item.id})
  }

  get getRedRote() {
    return ((this.info.noSent ?? 1) / (this.info.noSent ?? 1 + this.info.yesSent ?? 1)) * 100
  }

  get getGreenRote() {
    return ((this.info.yesSent ?? 1) / (this.info.noSent ?? 1 + this.info.yesSent ?? 1)) * 100
  }
}
</script>

<style scoped>
.item-post-text {
  font-size: 28rpx;
  color: #191919;
  /*margin-bottom: 20rpx;*/
}

.red-text {
  color: #FE655B;
  font-size: 40rpx;
  font-weight: bold;
}

.green-text {
  color: #63CB5E;
  font-size: 40rpx;
  font-weight: bold;
}

.red-progress-bar {
  background: linear-gradient(90deg, #FF6258 0%, #F19F8F 100%);
  /*background: #FE655B;*/
  border-top-left-radius: 20rpx;
  border-bottom-left-radius: 20rpx;
  width: 50%;
  height: 20rpx;
}

.green-progress-bar {
  width: 50%;
  background: linear-gradient(-90deg, #5DC454 0%, #8CFFA8 100%);
  /*background: #63CB5E;*/
  border-top-right-radius: 20rpx;
  border-bottom-right-radius: 20rpx;
  height: 20rpx;
}

.background-bar {
  background: #dedede;
  border-radius: 20rpx;
  height: 20rpx;
  width: 100%;
}
</style>